<template>
	<AbnormalTemplate 
		:treeData="treeData" 
		:showTimeLinePiker="false"
		@treeHandle="treeHandle"
		:showTreeType="showTreeType"
		:leaf="'root,area,enterprise'"
		>
		<div slot="rightBtn">
			&emsp;<el-button
				type="primary"
				icon="el-icon-plus"
				@click="openDelog()"
				>新增</el-button
			>
		</div>
		<Table
			:tableData="tableData"
			:tableHead="tableHead"
			:propKey="{ prop: 'id', label: 'name' }"
			:isUseSlot="false"
			:page="listQuery.page"
			:limit="listQuery.limit"
			v-loading="listLoading"
			@handleEdit="handleEdit"
		>
			<template slot="tool" slot-scope="{ data }">
				<el-button
					style="padding:3px;"
					icon="el-icon-document"
					@click="handleEdit(data.row)"
					type="text"
					>编辑</el-button
				>
				<el-button
					style="color:red;padding:3px;"
					icon="el-icon-delete"
					type="text"
					@click="deletInfo(data.row)"
					>删除</el-button
				>
			</template>
		</Table>
		<Pagination
			v-show="total > 0"
			:total="total"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
			@pagination="getList"
		></Pagination>

		<el-dialog
			title="参数信息"
			:visible.sync="dialogFormVisible"
			destroy-on-close
			width="1000px"
		>
			<v-form
				v-for="(item,i) in formList"
				:key="i"
				:formList="item.list"
				:title="item.title"
				:outofSubmit="true"
				@change="changeSubmit"
				ref="aaa"
			></v-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</AbnormalTemplate>
</template>
<script>
import AbnormalTemplate from "@/template/abnormal.temp.vue";
import Table from "@/components/Table";
import Pagination from "@/components/Pagination"; // 分页
import VForm from "@/components/luyiming/VueEleForm/index.vue";
import { getToken } from '@/utils/auth' // get token from cookie
import { getAlarmNoticeLst, getAlarmNoticePerson } from "@/api/RCIM/RCIM-systemConfig.js";
import {
	getAlarmType,
	insertAlarmNotice,
	getAlarmNotice,
	deleteAlarmNotice,
} from "@/api/RCIM/RCIM-systemConfig";
import { cloneDeep } from "lodash";
export default {
	name: "KdHistoryData",
	components: { AbnormalTemplate, Table, Pagination, VForm },
	data() {
		return {
			showTreeType: ['org'],
			treeData: {},
			total: 5,
			listLoading: true,
			listQuery: {
				page: 1,
				limit: 10,
				nodeId: '',
				nodeType: '',
				treeType: '',
			},
			dialogFormVisible: false,
			tableData: [],
			tableHead: [
				{
					id: "noticePerson",
					name: "通知人员",
					width: ""
				},
				{
					id: "noticePhone",
					name: "通知手机",
					align: "center",
					width: ""
				},
				{
					id: "acceptScope",
					name: "接受范围",
					align: "center",
					width: ""
				},
				{
					id: "abnormalType",
					name: "异常类型",
					align: "center",
					width: ""
				},
				{
					id: "operate",
					name: "操作",
					align: "center",
					width: ""
				}
			],
			formList: [
				{
					list: [
						{
							type: "select",
							width: "31%",
							label: "通知人员",
							placeholder: "请输入",
							moduleKey: "noticePerson",
							children: "option",
							options: []
						},
						{
							type: "input",
							width: "31%",
							label: "通知手机",
							placeholder: "请输入",
							disabled: true,
							moduleKey: "noticePhone"
						},
						{
							type: "select",
							width: "31%",
							label: "接受范围",
							placeholder: "请输入",
							// disabled: true,
							moduleKey: "acceptScope",
							children: "option",
							options: [],
						}
					],
					title: "通知信息"
				},
				{
					list: [
						{
							type: "checkbox-group",
							moduleKey: "focusType",
							label: "关注类型",
							placeholder: "请选择",
							children: "checkbox",
                            width: '100%',
							fetch: getAlarmType,
							optionsType: {
								id: "label",
								label: "value"
							},
							defaultValue: [],
							options: []
						}
					],
					title: "关注类型"
				},
				{
					list: [
						{
							type: "input",
							width: "40%",
							label: "接警升级(小时)时间",
							labelWidth: '143px',
							placeholder: "请输入",
							moduleKey: "abnormalFactor"
						}
					],
					title: "接警升级时间"
				},
				{
					list: [
						{
							type: "checkbox-group",
							width: "11%",
							labelWidth: '90px',
							label: "第一次升级"
                        },
                        {
							type: "select",
							width: "28%",
							label: "人员名称",
							placeholder: "请输入",
							moduleKey: "noticePersonOne",
							children: "option",
							options: []
                        },

                        {
							type: "input",
							width: "28%",
							label: "通知手机",
							placeholder: "请输入",
							disabled: true,
							moduleKey: "noticePhoneOne"
                        },

                        {
							type: "select",
							width: "28%",
							label: "接受范围",
							placeholder: "请输入",
							disabled: true,
							moduleKey: "acceptScopeOne",
							children: "option",
							options: [],
                        },
                        {
							type: "checkbox-group",
							width: "11%",
							labelWidth: '90px',
							label: "第二次升级"
                        },
                        {
							type: "select",
							width: "28%",
							label: "人员名称",
							placeholder: "请输入",
							moduleKey: "noticePersonTwo",
							children: "option",
							options: []
                        },

                        {
							type: "input",
							width: "28%",
							label: "通知手机",
							placeholder: "请输入",
							disabled: true,
							moduleKey: "noticePhoneTwo"
                        },

                        {
							type: "select",
							width: "28%",
							label: "接受范围",
							placeholder: "请输入",
							disabled: true,
							moduleKey: "acceptScopeTwo",
							children: "option",
							options: [],
						},
					],
					title: "升级通知人员"
				}
			],
			allPerson: {},
			rowId: '',
		};
	},
	mounted() {
	},
	created() {
	},
	methods: {
		/**
		 * @desc 编辑表格数据
		 * @param {Object} row 表格行数据
		 */
		handleEdit(row) {
			this.rowId = row.id;
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				getAlarmNotice({
					id: row.id
				}).then(res => {
					const person = res.data;
					this.$refs.aaa[3].setDefaultValue({
						noticePersonOne: person.noticePersonOne,
						noticePersonTwo: person.noticePersonTwo,
					})
					this.$refs.aaa[0].setDefaultValue({
						noticePerson: person.noticePerson,
					})
					this.$refs.aaa[2].setDefaultValue({
						abnormalFactor: person.abnormalFactor,
					})
					this.$refs.aaa[1].setDefaultValue({
						focusType: person.focusType.split(','),
					})
					this.changeSubmit('noticePerson', person.noticePerson)
					this.changeSubmit('noticePersonOne', person.noticePersonOne)
					this.changeSubmit('noticePersonTwo', person.noticePersonTwo)
					
				})
			})
			
		},
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		deletInfo(row){
			this.$confirm("确认要删除吗？")
				.then(_ => {
					deleteAlarmNotice({
						deletId: row.id
					}).then(res => {
						if(res.code === 200){
							this.getList();
							return this.$message.success('删除成功')
						}
						throw new Error('删除失败')
					}).catch(err => {
						this.$message.error('删除失败')
					})
				})
				.catch(_ => {});
			
		},
		/**
		 * @desc 打开弹窗
		 */
		openDelog(){
			this.rowId = ''
			this.dialogFormVisible = true
		},
		/**
		 * @desc 新增、编辑数据
		 */
		submit() {
			this.$confirm("确认要保存吗？")
				.then(_ => {
					let formData = {};
					for (const v of this.$refs.aaa) {
						formData = { ...v.form, ...formData };
					}
					console.log(formData);
					const formCloneDt = cloneDeep(formData);
					let msg = '新增';
					if(this.rowId){
						msg = '编辑';
					}
					formCloneDt.id = this.rowId;
					formCloneDt.nodeType = this.listQuery.nodeType;
					formCloneDt.nodeId = this.listQuery.nodeId;
					insertAlarmNotice(formCloneDt).then(res => {
						if(res.code === 200){
							this.getList();
							this.dialogFormVisible = false;
							return this.$message.success(msg + '成功')
						}
						throw new Error(msg + '失败')
					}).catch(err => {
						this.$message.error(msg + '失败')
					})
				})
				.catch(_ => {});
		},
		/**
		 * @desc 表单联动函数
		 * @param {String} keys key
		 * @param {String} value 
		 */
		changeSubmit(keys, value){
			if(keys === 'noticePerson'){
				const person = this.allPerson.person1.find(item => item.id === value);
				
				const list_0 = cloneDeep(this.formList[0]);
				list_0.list[2].options = [{
					label: person.enterpriseName,
					value: person.enterpriseId,
				}]
				this.formList.splice(0, 1, list_0)
				this.$refs.aaa[0].setDefaultValue({
					noticePhone: person.phone,
					acceptScope: person.enterpriseId,
				})
			}
			if(keys === 'noticePersonOne'){
				const person = this.allPerson.person2.find(item => item.id === value)
				const list_0 = cloneDeep(this.formList[3]);
				list_0.list[3].options = [{
					label: person.enterpriseName,
					value: person.enterpriseId,

				}]
				this.formList.splice(3, 1, list_0)
				this.$refs.aaa[3].setDefaultValue({
					noticePhoneOne: person.phone,
					acceptScopeOne: person.enterpriseId,
				})
			}
			if(keys === 'noticePersonTwo'){
				const person = this.allPerson.person3.find(item => item.id === value)
				const list_0 = cloneDeep(this.formList[3]);
				list_0.list[7].options = [{
					label: person.enterpriseName,
					value: person.enterpriseId,

				}]
				this.formList.splice(3, 1, list_0)
				this.$refs.aaa[3].setDefaultValue({
					noticePhoneTwo: person.phone,
					acceptScopeTwo: person.enterpriseId,
				})
			}
		},
		/**
		 * @desc 获取表格数据
		 */
		async getList() {
			this.listLoading = true;
			const { data } = await getAlarmNoticeLst(this.listQuery);
			this.total = data.total;
			this.tableData = data.AlarmNoticeList;
			this.listLoading = false;
		},
		/**
		 * @desc 获取人员信息
		 * @param {String} id 树节点id
		 * @param {String} treeType 树类型
		 * @param {String} nodeType 树节点类型
		 */
		async getPerson(id, treeType, nodeType) {
			this.listLoading = true;
			const { data } = await getAlarmNoticePerson({
				id,
				treeType,
				nodeType,
			});
			this.allPerson = data;
			const list_0 = cloneDeep(this.formList[0]);
			const list_2 = cloneDeep(this.formList[3]);
			list_0.list[0].options = data.person1.map(item => {
				item.label = item.name;
				item.value = item.id;
				return item
			})
			list_2.list[1].options = data.person2.map(item => {
				item.label = item.name;
				item.value = item.id;
				return item
			})
			list_2.list[5].options = data.person3.map(item => {
				item.label = item.name;
				item.value = item.id;
				return item
			})
			this.formList.splice(0, 1, list_0)
			this.formList.splice(3, 1, list_2)
		},
		/**
		 * @desc 点击树回调
		 * @param {Object} param 树节点数据
		 */
		treeHandle(param) {
			this.listQuery.nodeId = param.id;
			this.listQuery.nodeType = param.type;
			this.listQuery.treeType = param.treeType;
			this.listQuery.token = getToken();
			this.getList();
			this.getPerson(param.id, param.treeType, param.type);
		},
	}
};
</script>

<style lang="scss" scoped></style>
